<template>
  <div v-if="!is_login">
    <Welcome v-if="welcome_status === 0" @signStatus="changeWelcome"></Welcome>
    <Login v-else></Login>
  </div>

  <div v-else class="body">
    <div class="uc_container">
      <view class="user">
        <view class="up">
          <view class="left">
            <view class="user-head-qd">
              <image src="http://aczxsj.ctmon.com.cn/pc/images/a15.png"></image>
              <text>已认证</text>
            </view>
          </view>
          <view class="right">
            <image src="http://aczxsj.ctmon.com.cn/PC/acimg/sz.png" @click="to_settings"></image>
          </view>
        </view>
        <view class="down" @click="to_user_settings">
          <view class="down_num">

            <image v-if="userInfo.user_head_img" :src="userInfo.user_head_img"
              style="border-radius: 50%;width: 80px;height: 80px;border: 3px solid white;"></image>
            <image v-else src="/static/images/default_avatar.png"
              style="border-radius: 50%;width: 80px;height: 80px;border: 3px solid white;"></image>


          </view>
          <view>

            <text class="user_name">{{ userInfo.username }}</text>

          </view>
        </view>
      </view>
    </div>

    <view class="menu-container">
      <view class="grid">
        <block v-for="(item, index) in menus" :key="index">
          <view class="grid-item" v-if="item.is_show" @click="onGridItemClick(item.id)">
            <image :src="item.imgUrl" mode="scaleToFill" class="grid-image"></image>
            <text class="grid-text">{{ item.text }}</text>
          </view>
        </block>
      </view>
    </view>
    <van-toast id="van-toast" />
    <van-dialog id="van-dialog" />

  </div>
</template>
<script>
import Welcome from "@/components/user/welcome";
import Login from "@/components/user/login";
import Toast from '../../../../static/vant/toast/toast';
import { doLogin, getUserInfo } from "../../../requests/user";

import user_store from "@/store/index"



let $this
export default {
  name: "index",
  components: {
    Welcome,
    Login
  },
  data() {
    return {
      // 欢迎界面0，注册1 登录2
      welcome_status: 0,
      // 登录状态
      is_login: false,
      menus: [
        {
          id: 1,
          imgUrl: '/static/images/a35.png',
          text: "宠物管理",
          is_show: true
        },
        {
          id: 2,
          imgUrl: '/static/images/a58.png',
          text: "发票管理",
          is_show: false
        },
        {
          id: 3,
          imgUrl: '/static/images/a43.png',
          text: "地址管理",
          is_show: true
        },
        {
          id: 4,
          imgUrl: '/static/images/a41.png',
          text: "我的积分",
          is_show: true
        },
        {
          id: 5,
          imgUrl: '/static/images/a20.png',
          text: "区域查看",
          is_show: true
        },
        {
          id: 6,
          imgUrl: '/static/images/a39.png',
          text: "防疫监督所",
          is_show: false
        },
        {
          id: 7,
          imgUrl: '/static/images/a40.png',
          text: "合作申请",
          is_show: false
        },
        {
          id: 8,
          imgUrl: '/static/images/a47.png',
          text: "爱宠商城",
          is_show: false
        },
        {
          id: 9,
          imgUrl: '/static/images/a22.png',
          text: "信息管理",
          is_show: false
        },
        {
          id: 10,
          imgUrl: '/static/images/a22.png',
          text: "订单管理",
          is_show: true
        },
        {
          id: 10,
          imgUrl: '/static/images/a22.png',
          text: "立即下单",
          is_show: true
        },
      ],
      userInfo: {
        username: "",
        is_auth: 0,
        user_head_img: ""
      }
    }
  },
  methods: {
    initGetUserInfo() {
      // 获取用户信息
      getUserInfo().then(res => {
        $this.userInfo = res.data;
        if (!$this.userInfo.phone) {
          console.log('请绑定手机');
        }
      })
    },
    /**
     * 切换 注册/登录
     * @param $status 欢迎界面0，注册1，登录2
     */
    changeWelcome($status) {
      this.welcome_status = $status;
    },
    to_pet() {
      mpvue.navigateTo({
        url: "/pages/user/pet/main",
      })
    },
    /**
     * 跳转设置
     */
    to_settings() {
      mpvue.navigateTo({
        url: "/pages/user/settings/main",
      })
    },
    /**
     * 跳转用户设置
     */
    to_user_settings() {

      mpvue.navigateTo({
        url: "/pages/user/user_settings/main",
      })
    },
    /**
     * 跳转可看区域管理
     */
    to_area() {

      mpvue.navigateTo({
        url: "/pages/merchant/area/main",
      })
    },
    /**
     * 订单列表
     */
    to_orderlist(){

      mpvue.navigateTo({
        url: "/pages/user/order/list/main",
      })
    },
    /**
     * 格子点击方法
     * @param id 格子id
     */
    onGridItemClick(id) {
      
      switch (id) {
        case 1:
          // 宠物管理
          $this.to_pet();
          break;

        case 3:
          // 地址管理
          break;

        case 4:
          // 我的积分
          break;

        case 5:
          // 区域查看
          $this.to_area();
          break;

        case 10:
          // 订单管理
          $this.to_orderlist();
          break;

        case 11:
          // 立即下单
          break;
        default:
          Toast.fail('功能暂未开发');
          break;

      }
    }
  },
  created() {
    $this = this
  },
  onLoad() {
    let openid = user_store.getters.getOpenId()
    if (openid) {
      doLogin(openid).then(res => {
        let resp = res.data
        if (resp.code === 0) {
          user_store.setters.set_user_token(resp.data.token)
          user_store.setters.set_login(true)
          this.is_login = true
          this.$forceUpdate()

          // 获取用户信息
          this.initGetUserInfo();

        } else {
          Toast.fail('登录失败！' + resp.msg)
        }
      })
    }

  }
}
</script>
<style>
@import "index.css";
</style>
